<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue网格布局与最大化功能</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4895ef;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #4cc9f0;
            --warning: #f72585;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            color: var(--light);
            min-height: 100vh;
            padding: 20px;
            line-height: 1.6;
        }

        #app {
            max-width: 1400px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            animation: fadeIn 0.8s ease-out;
        }

        h1 {
            font-size: 3.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 700px;
            margin: 15px auto 0;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.85);
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 25px;
        }

        .btn {
            padding: 12px 25px;
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 50px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: var(--transition);
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            transition: var(--transition);
        }

        .grid-item {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            height: 320px;
            display: flex;
            flex-direction: column;
            animation: fadeIn 0.6s ease-out;
            animation-fill-mode: backwards;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .grid-item:hover {
            transform: translateY(-10px) scale(1.03);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .item-header {
            height: 45%;
            position: relative;
            overflow: hidden;
        }

        .item-header img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .grid-item:hover .item-header img {
            transform: scale(1.1);
        }

        .item-number {
            position: absolute;
            top: 15px;
            left: 15px;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
        }

        .item-content {
            padding: 20px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .item-title {
            font-size: 1.5rem;
            margin-bottom: 12px;
            color: #ffd166;
        }

        .item-description {
            font-size: 0.95rem;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.8);
            flex-grow: 1;
        }

        .item-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px 20px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }

        .item-tag {
            background: rgba(106, 176, 76, 0.2);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
        }

        /* 全屏样式 */
        .grid-item.expanded {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            border-radius: 0;
            cursor: default;
            overflow-y: auto;
            transform: none !important;
            height: auto;
            min-height: 100vh;
            box-shadow: none;
            animation: expand 0.5s ease-out;
        }

        @keyframes expand {
            from {
                transform: scale(0.8);
                opacity: 0;
                border-radius: 15px;
            }
            to {
                transform: scale(1);
                opacity: 1;
                border-radius: 0;
            }
        }

        .expanded-content {
            display: none;
            padding: 40px;
        }

        .grid-item.expanded .expanded-content {
            display: block;
        }

        .grid-item.expanded .initial-content {
            display: none;
        }

        .close-btn {
            position: fixed;
            top: 25px;
            right: 25px;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 1.8rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1001;
            backdrop-filter: blur(10px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: var(--transition);
            display: none;
        }

        .close-btn:hover {
            background: rgba(255, 90, 90, 0.8);
            transform: rotate(90deg);
        }

        .grid-item.expanded ~ .close-btn {
            display: flex;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 999;
            display: none;
        }

        .grid-item.expanded ~ .overlay {
            display: block;
        }

        .expanded-header {
            height: 50vh;
            min-height: 400px;
            position: relative;
            overflow: hidden;
            margin-bottom: 30px;
        }

        .expanded-header img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .expanded-title {
            font-size: 3rem;
            margin-bottom: 20px;
            color: #ffd166;
        }

        .expanded-text {
            font-size: 1.2rem;
            line-height: 1.8;
            max-width: 800px;
            margin: 0 auto 40px;
            color: rgba(255, 255, 255, 0.9);
        }

        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }

        .feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 25px;
            border-radius: 10px;
            text-align: center;
            transition: var(--transition);
        }

        .feature:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.08);
        }

        .feature i {
            font-size: 2.5rem;
            color: #ffd166;
            margin-bottom: 15px;
        }

        .feature h3 {
            margin-bottom: 10px;
            color: #ffd166;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .grid-container {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            }
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2.5rem;
            }

            .subtitle {
                font-size: 1.1rem;
            }

            .expanded-content {
                padding: 20px;
            }

            .expanded-title {
                font-size: 2rem;
            }

            .expanded-text {
                font-size: 1rem;
            }

            .expanded-header {
                height: 40vh;
                min-height: 300px;
            }
        }

        @media (max-width: 576px) {
            .grid-container {
                grid-template-columns: 1fr;
            }

            .btn {
                padding: 10px 20px;
                font-size: 0.9rem;
            }

            .controls {
                flex-wrap: wrap;
            }
        }

        footer {
            text-align: center;
            padding: 30px;
            margin-top: 50px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }

        .fade-enter-active, .fade-leave-active {
            transition: opacity 0.5s;
        }

        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <header>
        <h1>Vue网格布局系统</h1>
        <p class="subtitle">点击任意卡片可全屏查看详细信息，点击右上角关闭按钮返回网格视图</p>

        <div class="controls">
            <button class="btn" @click="addItem">
                <i class="fas fa-plus"></i> 添加新卡片
            </button>
            <button class="btn" @click="shuffleItems">
                <i class="fas fa-random"></i> 随机排序
            </button>
            <button class="btn" @click="changeLayout">
                <i class="fas fa-th-large"></i> 切换布局
            </button>
        </div>
    </header>

    <div class="grid-container" :style="{ gridTemplateColumns: layout }">
        <div
                v-for="(item, index) in items"
                :key="item.id"
                class="grid-item"
                :class="{ 'expanded': expandedItemId === item.id }"
                @click="expandItem(item.id)"
                :style="{ 'animation-delay': `${index * 0.05}s` }"
        >
            <div class="initial-content">
                <div class="item-header">
                    <img :src="item.image" :alt="item.title">
                    <div class="item-number">{{ index + 1 }}</div>
                </div>
                <div class="item-content">
                    <h3 class="item-title">{{ item.title }}</h3>
                    <p class="item-description">{{ item.shortDesc }}</p>
                </div>
                <div class="item-footer">
                    <div class="item-tag">{{ item.tags[0] }}</div>
                    <div>点击查看详情</div>
                </div>
            </div>

            <div class="expanded-content">
                <div class="expanded-header">
                    <img :src="item.image" :alt="item.title">
                </div>
                <h2 class="expanded-title">{{ item.title }}</h2>
                <p class="expanded-text">{{ item.longDesc }}</p>

                <div class="features">
                    <div class="feature">
                        <i class="fas fa-globe-americas"></i>
                        <h3>全球视野</h3>
                        <p>探索全球各地不同文化背景下的独特视角</p>
                    </div>
                    <div class="feature">
                        <i class="fas fa-lightbulb"></i>
                        <h3>创新思维</h3>
                        <p>突破传统思维框架，激发创造力</p>
                    </div>
                    <div class="feature">
                        <i class="fas fa-hands-helping"></i>
                        <h3>社区互动</h3>
                        <p>加入全球社区，与志同道合者交流</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <button class="close-btn" @click="collapseAllItems">
        <i class="fas fa-times"></i>
    </button>

    <div class="overlay" @click="collapseAllItems"></div>

    <footer>
        <p>Vue网格布局系统 | 使用Vue 3实现网格布局与全屏切换功能</p>
    </footer>
</div>

<script>
    const {createApp, ref, computed,onMounted} = Vue;

    createApp({
        setup() {
            // 项目数据
            const items = ref([
                {
                    id: 1,
                    title: "自然风光",
                    shortDesc: "探索世界上最美丽的自然景观",
                    longDesc: "从雄伟的山脉到宁静的湖泊，自然风光总能带给我们心灵的宁静。本专题带您领略全球最壮丽的自然景观，包括阿尔卑斯山脉、大堡礁、亚马逊雨林等世界奇观。",
                    tags: ["旅行", "摄影", "自然"],
                    image: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80"
                },
                {
                    id: 2,
                    title: "城市建筑",
                    shortDesc: "现代与古典建筑的完美融合",
                    longDesc: "城市建筑是文明的象征，也是人类智慧的结晶。从古代金字塔到现代摩天大楼，建筑艺术不断演变。本专题探索全球最具代表性的建筑，包括古典建筑、现代主义建筑和未来主义建筑。",
                    tags: ["建筑", "设计", "城市"],
                    image: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80"
                },
                {
                    id: 3,
                    title: "科技创新",
                    shortDesc: "改变世界的突破性技术",
                    longDesc: "科技是推动社会进步的核心动力。从人工智能到量子计算，从生物技术到可再生能源，科技创新正在重塑我们的世界。本专题带您了解最前沿的科技发展和未来趋势。",
                    tags: ["科技", "创新", "未来"],
                    image: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80"
                },
                {
                    id: 4,
                    title: "艺术创作",
                    shortDesc: "灵感与想象力的视觉表达",
                    longDesc: "艺术是人类情感和思想的表达方式。本专题涵盖绘画、雕塑、摄影、数字艺术等多种艺术形式，展示当代艺术家的杰出作品及其创作背后的故事。",
                    tags: ["艺术", "创意", "文化"],
                    image: "https://images.unsplash.com/photo-1547891654-e66ed7ebb968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80"
                },
                {
                    id: 5,
                    title: "健康生活",
                    shortDesc: "身心健康的科学方法",
                    longDesc: "健康是生活的基石。本专题提供科学的健康建议，包括营养饮食、规律运动、心理健康和预防医学等内容，帮助您建立健康的生活方式，提升生活质量。",
                    tags: ["健康", "营养", "运动"],
                    image: "https://images.unsplash.com/photo-1535914254981-b5012eebbd15?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80"
                },
                {
                    id: 6,
                    title: "美食文化",
                    shortDesc: "世界各地的美食传统",
                    longDesc: "美食是文化的载体，也是生活的艺术。本专题带您环游世界，探索不同国家的美食传统、烹饪技巧和饮食文化，从法国料理到日本寿司，从墨西哥塔可到印度咖喱。",
                    tags: ["美食", "文化", "烹饪"],
                    image: "https://images.unsplash.com/photo-1467003909585-2f8a72700288?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80"
                },
                {
                    id: 7,
                    title: "海洋探索",
                    shortDesc: "神秘深海世界的奥秘",
                    longDesc: "海洋覆盖了地球表面的70%，但人类对深海的了解还非常有限。本专题带您深入海洋世界，探索珊瑚礁生态系统、深海生物、海洋保护以及人类对海洋的探索历程。",
                    tags: ["海洋", "生态", "探险"],
                    image: "https://images.unsplash.com/photo-1505118380757-91f5f5632de0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80"
                },
                {
                    id: 8,
                    title: "太空旅行",
                    shortDesc: "人类探索宇宙的旅程",
                    longDesc: "从地球到月球，从太阳系到遥远星系，太空旅行代表着人类对未知的永恒追求。本专题回顾人类太空探索的历史，展望未来的太空旅行技术，包括商业航天、火星殖民和星际旅行。",
                    tags: ["太空", "科学", "未来"],
                    image: "https://images.unsplash.com/photo-1464802686167-b939a6910659?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80"
                }
            ]);

            // 当前展开的项目ID
            const expandedItemId = ref(null);

            // 布局设置
            const layout = ref("repeat(auto-fill, minmax(300px, 1fr))");

            // 展开项目
            const expandItem = (id) => {
                // 如果点击的是已经展开的项目，则收起
                if (expandedItemId.value === id) {
                    collapseAllItems();
                    return;
                }

                expandedItemId.value = id;

                // 禁用滚动
                document.body.style.overflow = 'hidden';
            };

            // 收起所有项目
            const collapseAllItems = () => {
                expandedItemId.value = null;

                // 恢复滚动
                document.body.style.overflow = '';
            };

            // 添加新项目
            const addItem = () => {
                const newId = items.value.length + 1;
                const tags = ["新项目", "示例", "Vue"];
                const randomTag = tags[Math.floor(Math.random() * tags.length)];

                items.value.push({
                    id: newId,
                    title: `新项目 ${newId}`,
                    shortDesc: "这是一个新添加的项目卡片",
                    longDesc: "这是新添加项目的详细描述内容。使用Vue可以轻松实现动态添加和删除网格项的功能。",
                    tags: [randomTag],
                    image: `https://picsum.photos/600/400?random=${newId}`
                });
            };

            // 随机排序项目
            const shuffleItems = () => {
                for (let i = items.value.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [items.value[i], items.value[j]] = [items.value[j], items.value[i]];
                }
            };

            // 切换布局
            const changeLayout = () => {
                const layouts = [
                    "repeat(auto-fill, minmax(300px, 1fr))",
                    "repeat(3, 1fr)",
                    "repeat(auto-fill, minmax(350px, 1fr))",
                    "repeat(4, 1fr)"
                ];

                // 获取当前布局索引
                const currentIndex = layouts.indexOf(layout.value);
                const nextIndex = (currentIndex + 1) % layouts.length;

                layout.value = layouts[nextIndex];
            };

            return {
                items,
                expandedItemId,
                layout,
                expandItem,
                collapseAllItems,
                addItem,
                shuffleItems,
                changeLayout
            };
        }
    }).mount('#app');
</script>
</body>
</html>